<template>
  <div>


    <div v-if="loading" class="loading-container">
      <a-spin size="large"  class="custom-spin" />
    </div>
    <div v-else class="masonry-container">
      <div class="masonry" :style="{ 'column-count': columnCount }">
        <div v-for="(item, index) in dataSource" :key="item.id" class="masonry-item">
          <div style="position: relative;">
            <div class="icfont_box">
              <div>
                <div class="icon-real" @click="toggleIcon(index, 'heart')" v-if="item.icons.heart.isSolid">
                  <img src="../../assets/images/new_img/实心.png" alt="" class="img_png">
                </div>
                <div class="icon-empty" @click="toggleIcon(index, 'heart')" v-else>
                  <img src="../../assets/images/new_img/空心.png" alt="" class="img_png">
                </div>
              </div>
            </div>
            <img :src="item.imgurl" :alt="item.text" class="responsive-image" loading="lazy"
              @click="emits('toDetail', item)">
          </div>
          <div class="card-content" @click="emits('toDetail', item)">
            <div class="text">{{ item.text }}</div>
            <div class="name">
              <img :src="item.imgurl" alt="">
              <p>{{ item.name }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { Spin as ASpin } from 'ant-design-vue';

const emits = defineEmits(['toDetail']);

const props = defineProps({
  col: { type: [String, Number], default: 6 },
  dataSource: { type: Array, default: () => [] },
});

const columnCount = ref(props.col);
const loading = ref(true); // 新增加载状态

const updateColumnCount = () => {
  const width = window.innerWidth;
  if (width <= 480) columnCount.value = 3;
  else if (width <= 768) columnCount.value = 4;
  else if (width <= 992) columnCount.value = 5;
  else if (width <= 1200) columnCount.value = 6;
  else columnCount.value = 6;

  // 获取到宽度后关闭加载状态
  loading.value = false;
};

let resizeTimer;
const debouncedUpdate = () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(updateColumnCount, 100);
};

onMounted(() => {
  // 初始获取宽度
  updateColumnCount();
  window.addEventListener("resize", debouncedUpdate);

  // 添加超时处理，防止某些情况下无法获取宽度
  setTimeout(() => {
    if (loading.value) {
      loading.value = false;
    }
  }, 1000);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", debouncedUpdate);
});

// 初始化每个数据项的图标状态
const initIcons = () => {
  props.dataSource.forEach(item => {
    item.icons = {
      heart: { isSolid: false },
      star: { isSolid: false }
    };
  });
};

initIcons();

// 点赞
const toggleIcon = (index, type) => {
  props.dataSource[index].icons[type].isSolid = !props.dataSource[index].icons[type].isSolid;
};
</script>

<style lang="less" scoped>
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  width: 100%;
}

.custom-spin :deep(.ant-spin-dot-item) {
  background-color: var( --color-Sel); /* 修改旋转点颜色 */
}

.masonry-container {
  padding: 0 16px;
}

.masonry {
  column-gap: 16px;
  width: 100%;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 16px;
  width: 100%;
  display: inline-block;
}

.icfont_box {
  width: 30%;
  height: auto;
  position: absolute;
  bottom: 12px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.icfont_box>div {
  display: flex;
  align-items: center;
}

.icon-empty {
  width: 1.56vw;
  height: 1.56vw;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;

  .img_png {
    width: 1vw;
    height: 1vw;
  }
}

.icon-real {
  width: 1.56vw;
  height: 1.56vw;
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
  opacity: 0.9;
  display: flex;
  justify-content: center;
  align-items: center;

  .img_png {
    width: 1vw;
    height: 1vw;
  }
}

.responsive-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.card-content {
  background: white;
  border-radius: 0 0 8px 8px;
}

.card-content .name {
  display: flex;
  margin-top: 10px;
  color: #333333;
  font-size: 16px;
}

.card-content .name>img {
  width: 1.5vw;
  height: 1.5vw;
  border-radius: 50px;
}

.card-content .name>p {
  margin-left: 10px;
}

.text {
  font-size: 0.83vw;
  text-align: left;
  color: var(--color-text-6);
  margin: 6px 0px;
}

p {
  font-size: 0.83vw;
  color: var(--color-text-3);
}
</style>